<script setup lang="ts">
import { reactive } from 'vue';
import Echarts from '@/components/ReEcharts/index.vue';
import { EChartsOption } from 'echarts/types/dist/echarts';

const option:EChartsOption = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        show: true
      }
    }
  },
  grid: {
    left: '4%',
    top: '15%',
    right: '4%',
    bottom: '10%'
  },
  legend: {
    data: ['昨日总金额', '今日总金额'],
    top: '4%',
    color: '#1FC3CE',
    fontSize: 14,
    selected: { 昨日使用率: false } // 不需要显示的设置为false
  },
  xAxis: {
    data: [
      '达人1',
      '达人2',
      '达人3',
      '达人4',
      '达人5',
      '达人6',
      '达人7',
      '达人8',
      '达人9'
    ],
    axisLine: {
      show: true, //隐藏X轴轴线
      lineStyle: {
        color: '#eee',
        width: 1
      }
    },
    axisTick: {
      show: true, //隐藏X轴刻度
      alignWithLabel: true
    },
    axisLabel: {
      show: true,
      color: '#333', //X轴文字颜色
      fontSize: 14
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '金额(万)',
      nameTextStyle: {
        color: '#333',
        fontSize: 14
      },
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#eee'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        color: '#333',
        fontSize: 14
      }
    }
  ],
  series: [
    {
      name: '昨日总金额',
      type: 'bar',
      barWidth: 18,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, // 右
          y: 1, // 下
          x2: 0, // 左
          y2: 0, // 上
          colorStops: [
            {
              offset: 0,
              color: '#F89898' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#F56C6C' // 100% 处的颜色
            }
          ]
        }
      },
      data: [24, 45, 43, 35, 76, 154, 86, 42, 68]
    },
    {
      name: '今日总金额',
      type: 'bar',
      barWidth: 18,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, // 右
          y: 1, // 下
          x2: 0, // 左
          y2: 0, // 上
          colorStops: [
            {
              offset: 0,
              color: '#52A7FF' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#409EFF' // 100% 处的颜色
            }
          ]
        }
      },
      data: [133, 23, 114, 67, 89, 35, 67, 96, 90]
    }
  ]
});


</script>

<template>
  <div class="echarts-box" >
    <Echarts :option='option' />
  </div>
</template>
<style scoped lang="scss">


.echarts-box {
  width: 100%;
  height: $base-app-main-height;
  border-left: 1px solid #33B8EC;
  border-top: 1px solid #33B8EC;
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
}
</style>
